// 全屏播放器
import nextIcon from '@/assets/images/next.svg';
import prevIcon from '@/assets/images/prev.svg';
import { useStore } from "vuex";
import { computed, ref, reactive, onBeforeUpdate } from 'vue';
import '../index.scss'

const FullScreenPlayer = ({
    props: {
        audioDuration: {
           type:Number,
           default: 0
        },
        currentTime: {
           type: Number,
            default: 0
        },
        fullScreenShow: {
            type: Boolean,
            default: false
        },
        handlePlayClick: Function,
        closeFullScreen: Function,
        handleSliderChange: Function,
    },
    setup(props){
        // 引入store
        const store = useStore();
        const isMusicPlay = computed(() => store.state.isMusicPlay);
        const sonRate = ref(props.rate);
        // 本地state
        const state = reactive({
            rate: 0,
            timer: null,
        });
        // 滑块改变
        const handleSliderChange = (value) => {
            props.handleSliderChange(value);
        };
        // 监听音乐播放
        const audioListener = () => {
            if (isMusicPlay.value) {
                state.timer = setInterval(() => {
                    try {
                        const rate = parseInt(props.currentTime / props.audioDuration * 100);
                        console.log(rate);
                        state.rate = rate;
                        if (rate === 100) {
                            clearInterval(state.timer);
                            state.rate = 0;
                            store.commit('handleChangeIsMusicPlay', false);
                        }
                    } catch (e) {
                        clearInterval(state.timer);
                    }
                }, 500)
            } else {
                clearInterval(state.timer);
            }
        };
        // 渲染
        return () => (
            <van-popup
                position={'bottom'}
                style={{height: '100%', width: '100%'}}
                v-model={[props.fullScreenShow, "show"]}
            >
                <div className="fullScreenPage">
                    <van-nav-bar
                        duration={0.05}
                        close-on-popstate
                        title="Falling Dowm"
                        v-slots={{
                            'left': () => <van-icon
                                onClick={ props.closeFullScreen}
                                color="#2e3030"
                                size={24} name="arrow-down"/>
                        }}
                    />
                    <div className="layer"/>
                    <h3 className="subtitle">subtitle</h3>
                    <div className="cd ">
                        <img className="play pause"
                             src="http://p3.music.126.net/zyM2NUWMH43vrcObVVF8Hg==/109951164808458773.jpg" alt=""/>
                    </div>
                    <div className="pageBottom">
                        <div className="progressBox">
                            <div className="time l">0: 00</div>
                            <van-slider buttonSize={18} inactive-color="#404142" active-color="#c32d2b"
                                        v-model={state.rate} onChange={handleSliderChange}/>
                            <div className="time r">3:27</div>
                        </div>
                        <div className="controls">
                            <div>
                                <van-icon name="sort" color="#2E3030" size={30}/>
                            </div>
                            <div className="iconSize">
                                <img src={prevIcon} alt=""/>
                            </div>
                            <div>
                                {isMusicPlay.value ?
                                    <van-icon name="pause" onClick={props.handlePlayClick}  color="#2E3030" size={40} />
                                    :
                                    <van-icon name="play" onClick={props.handlePlayClick} color="#2E3030" size={40} />
                                }
                            </div>
                            <div className="iconSize">
                                <img src={nextIcon} alt=""/>
                            </div>
                            <div>
                                <van-icon name="wap-nav" color="#2E3030" size={30}/>
                            </div>
                        </div>
                    </div>
                </div>
            </van-popup>
        )
    }
});

export default FullScreenPlayer;